<template>
<!--  画布-->


  <div  class="Mydiv">
<!--                                                                                                                           //出界停止绘制-->
    <canvas width="1020" height="490" ref="canvas"  @mousedown="MouDown" @mousemove="MouMove" @mouseup="MouSeup" @mouseleave="isDraw=false">
      浏览器版本过低，不支持canvas
    </canvas>

  </div>
  <div class="Mylode">
    <!--    控件-->

<!--颜色-->
    <span v-if="drawWate!='Conver'" class="YS"> 颜色：
     <el-color-picker v-model="color" show-alpha :predefine="predefineColors"  />
    </span>




    <div  class="Show">
<!--      选择控件-->
      <el-radio-group v-model="drawWate" size="large">
        <el-radio-button label="line"   v-if="drawWate!='Conver'">自由线</el-radio-button>
        <el-radio-button label="rectLine"  v-if="drawWate!='Conver'">直线</el-radio-button>
        <el-radio-button label="Rect"  v-if="drawWate!='Conver'">矩形</el-radio-button>
        <el-radio-button label="Circle"  v-if="drawWate!='Conver'">圆</el-radio-button>
        <el-radio-button label="Conver" v-if="drawWate">变换</el-radio-button>
      </el-radio-group>
    </div>

    <div v-if="drawWate!=null"  class="SX">
      <!--      边框控件-->
      <el-radio-group v-model="isBody" size="large">
        <el-radio-button label="Y"  v-if="drawWate!='Conver'">边框</el-radio-button>
        <el-radio-button label="N" v-if="drawWate!='line'&&drawWate!= 'rectLine'&&drawWate!='Conver'" >填充</el-radio-button>
      </el-radio-group>

      <el-radio-group v-model="isdotted" size="large"  v-if="isBody!=='N'">
        <el-radio-button label="Y"  v-if="drawWate!='Conver'">虚线</el-radio-button>
        <el-radio-button label="N"   v-if="drawWate!='Conver'">实线</el-radio-button>
      </el-radio-group>
    </div>
<!--清屏-->
    <div class="QC">
      <el-button type="danger" @click="clearDraw" >清除</el-button>
    </div>


    <div class="QD">
      <el-button type="danger" @click="QDL" v-if="isConver">变换确定</el-button>
      <el-button type="danger" @click="isConver=false,drawWate=null" v-if="drawWate==='Conver'&&(!isConver)">变换取消</el-button>
    </div>



    <div v-if="isConver" class="PY">

      <el-radio-group v-model="ConverName" size="large" >
        <el-radio-button label="M" >平移</el-radio-button>
        <el-radio-button label="S"  >缩放</el-radio-button>

      </el-radio-group>
    </div>

       <div class="TP">
         <el-button type="danger"  @click="XZ" >保存为图片</el-button >
       </div>
  </div>


</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref, watch} from 'vue'
export default {
  //未完成  去除临时的圆， 保存到圆  圆的重新绘制  改变颜色  填充
  //直线
  name: "MyCanvas",
  setup(){
    //定义获取节点


    //颜色控件
    const color = ref('rgba(255, 69, 0, 0.68)')
    const predefineColors = ref([
      '#ff4500',
      '#ff8c00',
      '#ffd700',
      '#90ee90',
      '#00ced1',
      '#1e90ff',
      '#c71585',
      'rgba(255, 69, 0, 0.68)',
      'rgb(255, 120, 0)',
      'hsv(51, 100, 98)',
      'hsva(120, 40, 94, 0.5)',
      'hsl(181, 100%, 37%)',
      'hsla(209, 100%, 56%, 0.73)',
      '#c7158577',
    ])



    const canvas=ref(null);
    let ctx=ref(null);
    //用于捕捉是否绘画
    let isDraw=ref(false);

    //画什么
    let drawWate=ref(null);

    //是否是边框
    let isBody=ref('Y');//是否发边框 还是填充
    //是否是虚线
    let isdotted=ref('Y');

    //存储绘画线段的数据
    //点 画线的临时数据
    let pointes=reactive({
      frst:{x:'',y:''}, //第一给点
      allpointe:[],//全部
      last:{x:'',y:''} ,//最后一个点
      color:'',
      isdotted:''
        }


    );
    //线 //便于变形操作 //切换 绘画目标时候在存储
    let Lines=reactive([]);


    //临时 临时直线n

    let rectLine=reactive({
      frst:{x:'',y:''},
      last:{x:'',y:''},
      color:'',  //颜色
      isdotted:''  //虚线
    })

    let rectLines=reactive([]);


    // 矩形 临时数据
    let Rect=reactive({
      frst:{x:'',y:''},
      last:{x:'',y:''},
      isBody:'',
      color:'',
      isdotted:''
    })
    let Rects=reactive([]);


    //临时的圆
    let Circle=reactive({
      x:0,
      y:0,
      r:0,
      isBody:'',
      color:'',
      isdotted:''
    });
    //持久存储
    let Circles=reactive([]);


    //图形变换选择框
   let Conver=reactive({
      frst:{x:'',y:''},
      last:{x:'',y:''}
   })

    //是否再进行图形变换
  let isConver=ref(false);

   //变换的操作move  rotate(旋转)  stretch(拉伸)
  let ConverName=ref('M');

    // 图形变换的坐标
    let ConverXY=reactive({
      frst:{x:'',y:''},
      last:{x:'',y:''},
      dx:0,
      dy:0

    });

    //清除全部临时数据
    function ClearAllTep(){
      //清除临时线
       pointes=reactive({
            frst:{x:'',y:''}, //第一给点
            allpointe:[],//全部
            last:{x:'',y:''}, //最后一个点
         color:'',
         isdotted:''
          }
      );
       //清除临时矩形
       Rect=reactive({
        frst:{x:'',y:''},
        last:{x:'',y:''},
         isBody:'',
         color:'',
         isdotted:''
      })


      //清除临时圆
      Circle=reactive({
        x:0,
        y:0,
        r:0,
        isBody:'',
        color:'',
        isdotted:''
      });

       //清除临时的直线
      rectLine=reactive({
        frst:{x:'',y:''},
        last:{x:'',y:''},
        color:'',  //颜色
        isdotted:''  //虚线
      })
    }

    //鼠标弹起  停止绘画并且保存绘画数据  清空临时数据
    function MouSeup(){

      //停止绘画
      isDraw.value=false
      //根据结果保存对应的数据
      if(drawWate.value==='line'){
        Lines.push(pointes);
      }else if(drawWate.value==='Rect'){
        Rects.push(Rect);
      }else if(drawWate.value==='Circle'){
        Circles.push(Circle);
      }else if(drawWate.value==='rectLine'){
        rectLines.push(rectLine);
      }else if(( drawWate.value==='Conver')&& isConver.value===false){
        isConver.value=true;
      }

      ClearAllTep();

    }

    //鼠标按下 初始化绘图信息
  function MouDown(mou) {
    isDraw.value=true;
    //初始化线 点
    let point={x:'',y:''};
    if(isConver.value===false) {
      //第一个点(画线)
      point.x = mou.offsetX;
      point.y = mou.offsetY;
      //
      pointes.frst.x = mou.offsetX;
      pointes.frst.y = mou.offsetY;
      pointes.isdotted = isdotted.value;
      pointes.color = color.value;
      pointes.allpointe.push(point);


      //初始化直线线
      rectLine.color = color.value;
      rectLine.isdotted = isdotted.value;
      rectLine.frst.x = mou.offsetX;
      rectLine.frst.y = mou.offsetY;


      //初始化矩形点
      Rect.frst.x = mou.offsetX;
      Rect.frst.y = mou.offsetY;
      Rect.isBody = isBody.value;
      Rect.isdotted = isdotted.value;
      Rect.color = color.value;


      //初始化圆的点
      Circle.x = mou.offsetX;
      Circle.y = mou.offsetY;
      Circle.isBody = isBody.value;
      Circle.color = color.value;
      Circle.isdotted = isdotted.value;

      //初始化图形选择框
      Conver.frst.x = mou.offsetX;
      Conver.frst.y = mou.offsetY;
    }
    ConverXY.frst.x=mou.offsetX;
    ConverXY.frst.y=mou.offsetY;

    //图形变换时候的操作
   if (isConver.value===true){
     //记录变换初始坐标


     console.log("第一个点", ConverXY.frst.x,ConverXY.frst.y)

     //鼠标在框选变换矩形的里面  进行平移操作
   //  if ((mou.offsetX>=Conver.frst.x)&&(mou.offsetY>= Conver.frst.y)&&(mou.offsetX<=Conver.last.y)&&(mou.offsetX<=Conver.last.x)){
       //进行平移操作
       //ConverName.value='move';
       console.log("移动操作");

     //}
   }


   // ctx.value.fillRect(point.x,point.y,100,100);
  }

    //鼠标移动 具体绘画函数,
    function MouMove(mou) {

    if(isDraw.value===true) {

      let point = {x: '', y: '',color:''};


      if(isConver.value===false) { //不是图形变换再初始
      //保存鼠标移动的点
      point.x = mou.offsetX;
      point.color=color.value;
      point.y = mou.offsetY;

      //下一个点（画线）
      pointes.last.x= mou.offsetX;
      pointes.last.y= mou.offsetY;
      pointes.color=color.value;


      //直线的第二个点
      rectLine.last.x=mou.offsetX;
      rectLine.last.y= mou.offsetY;


      //画矩形的第二个点
      Rect.last.x= mou.offsetX;
      Rect.last.y= mou.offsetY;

      //不是图形变换在进行初始化

        //画选择边框的第二个点
        Conver.last.x = mou.offsetX;
        Conver.last.y = mou.offsetY;
      }
      ConverXY.last.x=mou.offsetX;
      ConverXY.last.y=mou.offsetY;
      ConverXY.dx=ConverXY.last.x-ConverXY.frst.x;
      ConverXY.dy=ConverXY.last.y-ConverXY.frst.y;
      ConverXY.frst.x=ConverXY.last.x;
      ConverXY.frst.y=ConverXY.last.y;

      //画圆的半径

      Circle.r=Math.sqrt(((mou.offsetX-Circle.x)*(mou.offsetX-Circle.x)+(mou.offsetY-Circle.y)*(mou.offsetY-Circle.y)))

      //把点初始化
      pointes.allpointe.push(point);
      //画线
      if(drawWate.value==='line') {

        lineDraw();
      }

      //画矩形
      if(drawWate.value==='Rect') {
        clear();
        RectDraw();
      }
      //画圆
      if(drawWate.value==='Circle'){
        clear();
        CircleDraw();
      }
      //画直线
      if(drawWate.value==='rectLine'){
        clear();
        RectLineDraw()
      }
      //画选择边框
      if ((drawWate.value==='Conver')&&(isConver.value===false)){
        console.log("执行")
        clear();
        ConverDraw();
      }

      //如果是进行图形变换
      if(isConver.value===true){

        console.log("没有执行")
        //记录图形变换的第二个坐标

        clear();
        ConverDraw();
        ConverDrawBigen();


      }
    }

    }


    //绘制矩形
    function RectDraw(){
        //填充 ctx.fillRect(x,y,w,h);
      //边框 ctx.strokeRect(x,y,w,h)
      ctx.value.strokeStyle=Rect.color;
      ctx.value.fillStyle=Rect.color;

      //是否是虚线
      if(Rect.isdotted==='Y'){
        ctx.value.setLineDash([8,10]); //单个长度  之间距离
      }else {
        ctx.value.setLineDash([8,0]);
      }

      //是否是边框
      if (Rect.isBody==='Y') { //边框
        ctx.value.strokeRect(Rect.frst.x, Rect.frst.y, Rect.last.x - Rect.frst.x, Rect.last.y - Rect.frst.y)
      }else { //填充
        ctx.value.fillRect(Rect.frst.x, Rect.frst.y, Rect.last.x - Rect.frst.x, Rect.last.y - Rect.frst.y)
      }
    }





    //画圆
    function CircleDraw(){


      //颜色
      ctx.value.strokeStyle=Circle.color;
      ctx.value.fillStyle=Circle.color;


      //是否是虚线
      if(Circle.isdotted==='Y'){
        ctx.value.setLineDash([8,10]); //单个长度  之间距离
      }else {
        ctx.value.setLineDash([8,0]);
      }

      ctx.value.beginPath();

      ctx.value.arc(Circle.x,Circle.y,Circle.r,0,2*3.14,false);
      if (Circle.isBody==='Y'){
        ctx.value.stroke();
      }else {
        ctx.value.fill();
      }


    }


    //画直线
    function RectLineDraw(){

      //颜色
      ctx.value.strokeStyle=rectLine.color;
      ctx.value.fillStyle=rectLine.color;

      //是否是虚线
      if(rectLine.isdotted==='Y'){
        ctx.value.setLineDash([8,10]); //单个长度  之间距离
      }else {
        ctx.value.setLineDash([8,0]);
      }

      //绘画
      ctx.value.beginPath();
      ctx.value.moveTo(rectLine.frst.x,rectLine.frst.y);
      ctx.value.lineTo(rectLine.last.x,rectLine.last.y);

      ctx.value.stroke();
    }


    //绘画线段
    function lineDraw(){

      //颜色
      ctx.value.strokeStyle=pointes.color;
      ctx.value.fillStyle=pointes.color;

      //是否是虚线
      if(pointes.isdotted==='Y'){
        ctx.value.setLineDash([8,10]); //单个长度  之间距离
      }else {
        ctx.value.setLineDash([8,0]);
      }

      ctx.value.beginPath();
      ctx.value.moveTo(pointes.frst.x,pointes.frst.y);

       ctx.value.lineTo(pointes.last.x,pointes.last.y)

    // ctx.value.strokeStyle='red';
     ctx.value.stroke();

     //绘制结束后把下一个点给初始点
      pointes.frst.x=pointes.last.x;
      pointes.frst.y=pointes.last.y;

    }




    //绘制图形选择框
    function ConverDraw(){

     //虚线
      ctx.value.setLineDash([8,10]); //单个长度  之间距离
      //黑色
      ctx.value.strokeStyle='black';


      ctx.value.strokeRect(Conver.frst.x, Conver.frst.y, Conver.last.x - Conver.frst.x, Conver.last.y - Conver.frst.y);

    }

    //执行图形变换
    function ConverDrawBigen(){
      //平移操作
     if (isConver.value){

      let isHas=false;
       console.log("增量：",ConverXY.dx,ConverXY.dy);

       //圆
         for (let i = 0; i < Circles.length; i++) {
           //如果圆心在框选框的内部，就进行变换操作
           if (((Circles[i].x > Conver.frst.x) && (Circles[i].y > Conver.frst.y) && (Circles[i].x < Conver.last.x) && (Circles[i].y < Conver.last.y))) {
             isHas = true;
             if (ConverName.value === 'M') {
               Circles[i].x += ConverXY.dx;
               Circles[i].y += ConverXY.dy;
             }

             if (ConverName.value === 'S') {

               if((Circles[i].r-ConverXY.dx>0)) {
                 Circles[i].x += ConverXY.dx;
                 Circles[i].y += ConverXY.dy;
                 Circles[i].r -= ConverXY.dx;
               }

             }
           }

         }


         //直线
         for(let i=0;i<rectLines.length;i++){
           //如果线在只有有一段
           if(((rectLines[i].frst.x>Conver.frst.x)&&(rectLines[i].frst.y>Conver.frst.y))&&((rectLines[i].last.x<Conver.last.x)&&(rectLines[i].last.y<Conver.last.y))){
             isHas = true;
             if(ConverName.value === 'M') {

              rectLines[i].frst.x += ConverXY.dx;
              rectLines[i].frst.y += ConverXY.dy;


              rectLines[i].last.x += ConverXY.dx;
              rectLines[i].last.y += ConverXY.dy;
            }

             if(ConverName.value==='S'){

               if((rectLines[i].frst.x>Conver.frst.x)&&(rectLines[i].frst.y>Conver.frst.y)) {
                 rectLines[i].frst.x += ConverXY.dx;
                 rectLines[i].frst.y += ConverXY.dx;
               }


             }




           }

         }

         //自由线
         for(let i=0;i<Lines.length;i++){
           for (let j=0;j<Lines[i].allpointe.length;j++){
             if(((Lines[i].allpointe[j].x>Conver.frst.x)&&(Lines[i].allpointe[j].y>Conver.frst.y))&&(Lines[i].allpointe[j].x<Conver.last.x)&&(Lines[i].allpointe[j].y<Conver.last.y)){
               isHas = true;
               if(ConverName.value === 'M') {
                 Lines[i].allpointe[j].x += ConverXY.dx;
                 Lines[i].allpointe[j].y += ConverXY.dy;
                 // Lines[i].allpointe[j + 1].x += ConverXY.dx;
                 // Lines[i].allpointe[j + 1].y += ConverXY.dy;
               }
               //不提供缩放
             }

           }
         }


       //Rects[i].frst.x, Rects[i].frst.y, Rects[i].last.x
       //如果矩形在内部

         for (let i = 0; i < Rects.length; i++) {
           if (((Rects[i].frst.x > Conver.frst.x) && (Rects[i].frst.y > Conver.frst.y)) && ((Rects[i].last.x < Conver.last.x) && (Rects[i].last.y < Conver.last.y))) {
             isHas = true;
             if (ConverName.value === 'M') {
               Rects[i].frst.x += ConverXY.dx;
               Rects[i].frst.y += ConverXY.dy;
               Rects[i].last.x += ConverXY.dx;
               Rects[i].last.y += ConverXY.dy;

             }
             if(ConverName.value === 'S'){
               Rects[i].frst.x += ConverXY.dx;
               Rects[i].frst.y += ConverXY.dy;

             }
           }
         }



       if(isHas) { //有元素才能平移
         if(ConverName.value === 'M') { //平移
           Conver.frst.x = Conver.frst.x + ConverXY.dx;
           Conver.frst.y = Conver.frst.y + ConverXY.dy;

           Conver.last.x = Conver.last.x + ConverXY.dx;
           Conver.last.y = Conver.last.y + ConverXY.dy;
         }
         if(ConverName.value === 'S'){ //缩放
           Conver.frst.x  += ConverXY.dx;
           Conver.frst.y += ConverXY.dy;
         }

       }
     }
    }



    //清屏(用于动画)  并且绘制原来的数据
    function clear(){
      // /ctx.clearRect(x,y,w,h); // (擦除一个矩形范围)
      ctx.value.clearRect(0,0,1200,1000);
     RestroedAll();
    }

    //清空屏幕 ，
    function clearDraw(){  //清除全部 //初始化全部
      Circles=reactive([]);
      Rects=reactive([]);
      Lines=reactive([]);
      rectLines=reactive([]);
      ctx.value.clearRect(0,0,1200,1000);//清空按钮
    }


    //复原全部
    function RestroedAll(){
      RestroedLins(); //复原直线
      RestroedRects();//复原矩形

      RestroedCircle();//复原圆形
      RestroedRectLine();//复原直线

     // ConverDraw(); //绘制图形旋转变换
    }


    //复原线段
    function RestroedLins(){

      for (let j=0;j<Lines.length;j++) {


        //是否是虚线
        if(Lines[j].isdotted==='Y'){
          ctx.value.setLineDash([8,10]); //单个长度  之间距离
        }else {
          ctx.value.setLineDash([8,0]);
        }

        for (let i = 0; i < Lines[j].allpointe.length - 1; i++) {
          //颜色

          ctx.value.beginPath();
          // console.log("数据", pointes.allpointe)
          if (( Lines[j].allpointe[i].x !== 0) && ( Lines[j].allpointe[i + 1].x !== 0)) {

            ctx.value.moveTo( Lines[j].allpointe[i].x,  Lines[j].allpointe[i].y);

            ctx.value.lineTo( Lines[j].allpointe[i + 1].x,  Lines[j].allpointe[i + 1].y);

            ctx.value.strokeStyle=Lines[j].allpointe[i].color;
            ctx.value.fillStyle=Lines[j].allpointe[i].color;


            // ctx.value.strokeStyle = 'blue';
          }

          //不是断点才复现
          ctx.value.stroke();

        }
      }

    }

    //复原直线
    function RestroedRectLine(){


      for(let i=0;i<rectLines.length;i++){
        //颜色
        ctx.value.strokeStyle=rectLines[i].color;
        ctx.value.fillStyle=rectLines[i].color;

        //是否是虚线
        if(rectLines[i].isdotted==='Y'){
          ctx.value.setLineDash([8,10]); //单个长度  之间距离
        }else {
          ctx.value.setLineDash([8,0]);
        }

        //绘画
        ctx.value.beginPath();
        ctx.value.moveTo(rectLines[i].frst.x,rectLines[i].frst.y);
        ctx.value.lineTo(rectLines[i].last.x,rectLines[i].last.y);
        ctx.value.stroke();

      }
    }


    //复原矩形
    function RestroedRects(){



      for (let i=0;i<Rects.length;i++) {

        ctx.value.strokeStyle=Rects[i].color;//颜色
        ctx.value.fillStyle=Rects[i].color;
        //是否是虚线
        if(Rects[i].isdotted==='Y'){
          ctx.value.setLineDash([8,10]); //单个长度  之间距离
        }else {
          ctx.value.setLineDash([8,0]);
        }





        if(Rects[i].isBody==='Y') { //不填充
          ctx.value.strokeRect(Rects[i].frst.x, Rects[i].frst.y, Rects[i].last.x - Rects[i].frst.x, Rects[i].last.y - Rects[i].frst.y);
        }else {
          ctx.value.fillRect(Rects[i].frst.x, Rects[i].frst.y, Rects[i].last.x - Rects[i].frst.x, Rects[i].last.y - Rects[i].frst.y);
        }
      }
    }


    //复原圆形
    function RestroedCircle(){


      for(let i=0;i<Circles.length;i++) {
        //颜色
        ctx.value.strokeStyle=Circles[i].color;
        ctx.value.fillStyle=Circles[i].color;

        //是否是虚线
        if(Circles[i].isdotted==='Y'){
          ctx.value.setLineDash([8,10]); //单个长度  之间距离
        }else {
          ctx.value.setLineDash([8,0]);
        }

        ctx.value.beginPath();
        ctx.value.arc(Circles[i].x, Circles[i].y, Circles[i].r, 0, 2 * 3.14, false);
        //是否是填充
        if (Circles[i].isBody==='Y'){
          ctx.value.stroke();
        }else {
          ctx.value.fill();
        }
      }
    }

    //点击确定
    function QDL(){
      isConver.value=false;
      drawWate.value=null;
      Conver=reactive({
        frst:{x:'',y:''},
        last:{x:'',y:''}
      })
      clear();

    }

   // let url=ref(null);
    function XZ(){




      var imgURL = canvas.value.toDataURL({format: "image/png", quality:1, width:12000, height:4000});
      var dlLink = document.createElement('a');
      dlLink.download = "fileName";
      dlLink.href = imgURL;
      dlLink.dataset.downloadurl = [ dlLink.download, dlLink.href].join(':');
      document.body.appendChild(dlLink);
      dlLink.click();
      document.body.removeChild(dlLink);

     // console.log("保存的数据：",url);
    }







    //初始化方法
    onMounted(()=>{
      //获取页面canvas绘画版本
      canvas.value=getCurrentInstance().refs.canvas;
      //获得画笔
      ctx.value=canvas.value.getContext("2d");
      //获取DOM节点

      console.log(canvas);


   //
   //    rectLines=JSON.parse(window.localStorage.getItem("p"));
   // //  Object.assign(rectLines, window.localStorage.getItem("p"));
   //    window.addEventListener('beforeunload',()=>{
   //    //  window.onunload=function (){
   //
   //        window.localStorage.setItem("qw","nih");
   //     // }
   //    })
   //  //  lineDraw();

    })
    return{
     // url,
      XZ,
      QDL,
      ConverXY,
      ConverName,
      Conver,
      ConverDrawBigen,
      isConver,
      ConverDraw,
      RestroedRectLine,
      RectLineDraw,
      rectLines,
      rectLine,
      isdotted,
      isBody,
      color,
      predefineColors,
      clearDraw,
      RestroedCircle,
      CircleDraw,
      Circle,
      Circles,
      ClearAllTep,
      RestroedRects,
      MouSeup,
      drawWate,
      RectDraw,
    RestroedAll,
      Rect,
      Rects,
      pointes,
      MouDown,
      isDraw,
      canvas,
      ctx,
      Lines,
      MouMove,
      RestroedLins,

      lineDraw,
      clear
    }

  }
}
</script>

<style scoped>
.TP{
  position: absolute;
  top: 25px;
  left: 872px;
}
.QD{
  position: absolute;
  top: 23px;
  left: 396px;
}
.PY{
  position: absolute;
  top: 24px;
  left: 247px;
}
.YS{
  position: absolute;
  top: 25px;
  left: 45px;
}
.QC{
  position: absolute;
  top: 25px;
  left: 798px;
}
.Show{
  position: absolute;
  top: 21px;
  left: 154px;
}
.SX{
  position: absolute;
  top: 21px;
  left: 515px;
}
canvas{
  border: 1px solid;
  position: absolute;
  top: 0px;
  left: 0px;
}
.Mydiv{
  width:  1031px;
  height: 500px;
  position: absolute;
  top: 20%;
  left: 26%;
  border: 0px solid;
}
.Mylode{
  border: 1px solid;
  width:  1020px;
  height: 100px;
  position: absolute;
  top: 20px;
  left: 26%;
}


</style>